<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明周期</title>
</head>
<body>
    <button>看图神器</button>
    <button>下去吧</button>
    <hr>

    <div id="root"></div>

    <script src="../js/17/react.development.js"></script>
    <script src="../js/17/react-dom.development.js"></script>
    <script src="../js/17/babel.min.js"></script>

    <script type="text/babel">
        //获取两个按钮
        let btns = document.querySelectorAll('button');

        btns[0].onclick = function(){
            ReactDOM.render(<Image />, document.querySelector("#root"));
        }
        btns[1].onclick = function(){
            // mount 挂载 unmount 卸载  component 组件 at 在  Node 节点
            ReactDOM.unmountComponentAtNode(document.querySelector("#root"));
        }

        //声明一个类
        class Image extends React.Component{
            state = {
                src: 'http://127.0.0.1:3000/image/random'
            }
            render(){
                console.log('组件挂载中 -- render')
                //render 方法的 this 也是指向实例对象的
                return <div>
                    <button onClick={this.forceChange}>强制更新图片</button><br/>
                    <img width="80%" onClick={this.change} src={this.state.src} alt=""/>
                </div>;
            }

            change = () => {
                // change方法的 this 也是指向实例对象的
                this.setState({
                    src: 'http://192.168.36.25:3000/image/random?t='+Date.now()
                })
            }

            forceChange = () => {
                this.forceUpdate();
            }

            // will 将要  unmount 卸载
            //作用: 完成收尾工作, 清空定时器, 取消频道订阅等
            componentWillUnmount(){
                console.log('组件将要卸载 -- componentWillUnmount');
            }

            //构造方法
            constructor(){
                super();
                console.log('构造方法 -- constructor')
            }

            //组件即将要挂载
            UNSAFE_componentWillMount(){
                console.log('组件将要挂载 -- componentWillMount')
            }

            //生命周期 - 1 当组件挂载完毕之后, 会自动执行   生命周期回调函数中的 this 指向『实例对象的』
            //作用: 完成一些组件的初始化操作.  比如说: AJAX 请求, 启动定时器等
            //component 组件   did 完成   mount 挂载
            componentDidMount(){
                console.log('组件挂载完毕 -- componentDidMount');
            }

            //组件应该要更新  should 应该
            shouldComponentUpdate(){
                console.log('组件应该要更新 -- shouldComponentUpdate');
                //这里必须要返回一个布尔类型的值
                return true;
            }

            //组件将要更新
            UNSAFE_componentWillUpdate(){
                console.log('组件将要更新 -- componentWillUpdate');
            }

            //组件更新完毕
            componentDidUpdate(){
                console.log('组件完成更新 -- componentDidUpdate');
            }

        }
    </script>
</body>
</html> 